<!--
 * @FileDescription 毫米波雷达
 * @Author 杨宇翔
 * @Date 20220727 16:20:39
 * @LastEditors 杨宇翔
 * @LastEditTime 20220727 16:20:39
-->
<template>
    <router-view class="lidar" />
    <div class="loading" v-show="LidarComponent.Default.IsLoading.value">
        <img src="/static/Lidar/icon_loading.png">
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import LidarComponent from './LidarComponent';

onMounted(() => {
    console.log('2222222222222222222222222222222');
    
    LidarComponent.Default.Awake()});
onUnmounted(() => LidarComponent.Default.Destroy());
</script>

<style scoped>
.lidar {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    overflow: hidden;
}

.loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(1rem);
}

.loading>img {
    position: absolute;
    left: 50%;
    top: 50%;

    animation: loading 1000ms;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes loading {
    0% {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
}
</style>./LidarComponent